<template>
  <div class="completion-order-container">
    <!-- 顶部搜索和操作区域 -->
    <div class="top-section">
      <div class="title-section">
        <h2 class="page-title">完工单</h2>
      </div>
      
      <div class="search-section">
        <el-input
          v-model="searchForm.orderNo"
          placeholder="工单编号"
          clearable
          style="width: 200px; margin-right: 10px;"
        />
        <el-button type="primary" @click="handleSearch" :loading="loading">
          <el-icon><Search /></el-icon>
          查询
        </el-button>
        <el-button type="primary" @click="handleAdvancedSearch">
          <el-icon><Search /></el-icon>
          高级查询
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
        <el-button type="warning" @click="handleBatchApprove" :disabled="selectedRows.length === 0">
          <el-icon><Check /></el-icon>
          审批通过
        </el-button>
        <el-button type="danger" @click="handleBatchReject" :disabled="selectedRows.length === 0">
          <el-icon><Close /></el-icon>
          审批不通过
        </el-button>
        <el-button @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
        </el-button>
        
        <!-- 列表设置按钮 -->
        <el-button @click="showColumnSettings" class="column-settings-btn">
          <el-icon><Grid /></el-icon>
        </el-button>
      </div>
    </div>
    
    <!-- 高级查询条件区域 -->
    <div v-show="advancedSearchVisible" class="advanced-search-section">
      <div class="search-criteria">
        <div class="criteria-item">
          <label>工单编号:</label>
          <el-input v-model="advancedSearchForm.orderNo" placeholder="请输入工单编号" clearable class="criteria-input" />
        </div>
        <div class="criteria-item">
          <label>工序名称:</label>
          <el-input v-model="advancedSearchForm.taskName" placeholder="请输入工序名称" clearable class="criteria-input" />
        </div>
        <div class="criteria-item">
          <label>工序编号:</label>
          <el-input v-model="advancedSearchForm.taskCode" placeholder="请输入工序编号" clearable class="criteria-input" />
        </div>
      </div>
      <div class="search-actions">
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          查询
        </el-button>
        <el-button @click="handleAdvancedSearchReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        <el-button @click="handleCloseAdvancedSearch">
          <el-icon><Close /></el-icon>
          关闭
        </el-button>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
            <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        border
        stripe
      >
        <!-- 动态列显示 -->
        <template v-for="column in columnSettings.filter(col => col.visible).sort((a, b) => a.order - b.order)" :key="column.key">
          
          <!-- 选择列 -->
          <el-table-column v-if="column.key === 'selection'" type="selection" :width="column.width" align="center" />
          
          <!-- 工单列 -->
          <el-table-column v-if="column.key === 'OrderNo'" :label="column.label" :width="column.width" sortable>
            <template #default="scope">
              <el-link 
                type="primary" 
                @click="handleOrderClick(scope.row)"
                class="order-link"
                :underline="false"
              >
                {{ scope.row.OrderNo }}|{{ scope.row.TaskName }}
              </el-link>
            </template>
          </el-table-column>
          
          <!-- 工单编号列 -->
          <el-table-column v-if="column.key === 'OrderNoDetail'" :label="column.label" :width="column.width" sortable>
            <template #default="scope">
              {{ scope.row.OrderNo }}
            </template>
          </el-table-column>
          
          <!-- 工序名称列 -->
          <el-table-column v-if="column.key === 'TaskName'" :label="column.label" :width="column.width" sortable>
            <template #default="scope">
              {{ scope.row.TaskName }}
            </template>
          </el-table-column>
          
          <!-- 工序编号列 -->
          <el-table-column v-if="column.key === 'TaskCode'" :label="column.label" :width="column.width">
            <template #default="scope">
              {{ scope.row.TaskCode }}
            </template>
          </el-table-column>
          
          <!-- 审批状态列 -->
          <el-table-column v-if="column.key === 'ApprovalStatus'" :label="column.label" :width="column.width" align="center">
            <template #default="scope">
              <el-tag 
                :type="scope.row.ApprovalStatus ? 'success' : 'danger'"
                :effect="scope.row.ApprovalStatus ? 'light' : 'light'"
              >
                {{ scope.row.ApprovalStatus ? '审核通过' : '审核未通过' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <!-- 审批人列 -->
          <el-table-column v-if="column.key === 'Approver'" :label="column.label" :width="column.width">
            <template #default="scope">
              {{ scope.row.Approver }}
            </template>
          </el-table-column>
          
          <!-- 审批时间列 -->
          <el-table-column v-if="column.key === 'ApprovalTime'" :label="column.label" :width="column.width" sortable>
            <template #default="scope">
              {{ formatDateTime(scope.row.ApprovalTime) }}
            </template>
          </el-table-column>
          
        </template>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <div class="pagination-info">
        <span>共{{ pagination.total }}条</span>
      </div>
      
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>

         

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="完工单详情"
      width="700px"
      :close-on-click-modal="false"
    >
             <el-descriptions :column="2" border>
         <el-descriptions-item label="完工单ID">{{ currentRow.CompletedWorkOrdersId }}</el-descriptions-item>
         <el-descriptions-item label="产品名称">{{ currentRow.ProductName }}</el-descriptions-item>
         <el-descriptions-item label="工单编号">{{ currentRow.OrderNo }}</el-descriptions-item>
         <el-descriptions-item label="工序名称">{{ currentRow.TaskName }}</el-descriptions-item>
         <el-descriptions-item label="工序编号">{{ currentRow.TaskCode }}</el-descriptions-item>
         <el-descriptions-item label="审批状态">
           <el-tag :type="currentRow.ApprovalStatus ? 'success' : 'danger'">
             {{ currentRow.ApprovalStatus ? '审核通过' : '审核未通过' }}
           </el-tag>
         </el-descriptions-item>
         <el-descriptions-item label="审批人">{{ currentRow.Approver }}</el-descriptions-item>
         <el-descriptions-item label="审批时间">{{ formatDateTime(currentRow.ApprovalTime) }}</el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ formatDateTime(currentRow.CreatedTime) }}</el-descriptions-item>
         <el-descriptions-item label="创建人">{{ currentRow.Creator || '系统' }}</el-descriptions-item>
         <el-descriptions-item label="修改人">{{ currentRow.Modifier || '-' }}</el-descriptions-item>
         <el-descriptions-item label="修改时间">{{ formatDateTime(currentRow.ModifiedTime) }}</el-descriptions-item>
       </el-descriptions>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </span>
      </template>
        </el-dialog>
    
    <!-- 列表设置对话框 -->
    <el-dialog
      v-model="columnSettingsVisible"
      title="列表设置"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="column-settings-content">
        <div class="settings-header">
          <span>选择要显示的列：</span>
          <el-button type="primary" size="small" @click="resetColumnSettings">重置</el-button>
        </div>
        
        <div class="column-list">
          <div 
            v-for="column in columnSettings" 
            :key="column.key"
            class="column-item"
            :class="{ 'disabled': !column.visible }"
          >
            <el-checkbox 
              v-model="column.visible"
              :label="column.label"
            />
            <span class="column-width">宽度: {{ column.width }}px</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="columnSettingsVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { Search, Download, Check, Close, Refresh, Grid } from '@element-plus/icons-vue'
import { MES_XHY_ApiHost } from '@/utils/Interceptors'

// 接口类型定义
interface CompletionOrderItem {
  CompletedWorkOrdersId: number
  ProductName: string
  OrderNo: string
  TaskName: string
  TaskCode: string
  ApprovalStatus: boolean
  Approver: string
  ApprovalTime: string
  CreatedTime: string
  Creator: string
  Modifier: string
  ModifiedTime: string
}

interface ApiResponse {
  TotalCount: number
  TotalPages: number
  CurrentPage: number
  PageSize: number
  Data: CompletionOrderItem[]
}

// 搜索表单
const searchForm = reactive({
  orderNo: ''
})

// 高级搜索表单
const advancedSearchForm = reactive({
  orderNo: '',
  taskName: '',
  taskCode: ''
})

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 数据相关
const tableData = ref<CompletionOrderItem[]>([])
const selectedRows = ref<CompletionOrderItem[]>([])
const loading = ref(false)

// 对话框相关
const advancedSearchVisible = ref(false)
const viewDialogVisible = ref(false)
const currentRow = ref<CompletionOrderItem>({} as CompletionOrderItem)

// 列表设置相关
const columnSettingsVisible = ref(false)
const columnSettings = reactive([
  { key: 'selection', label: '选择', visible: true, order: 1, width: 55 },
  { key: 'OrderNo', label: '工单', visible: true, order: 2, width: 280 },
  { key: 'OrderNoDetail', label: '工单编号', visible: true, order: 3, width: 220 },
  { key: 'TaskName', label: '工序名称', visible: true, order: 4, width: 220 },
  { key: 'TaskCode', label: '工序编号', visible: true, order: 5, width: 220 },
  { key: 'ApprovalStatus', label: '审批状态', visible: true, order: 6, width: 160 },
  { key: 'Approver', label: '审批人', visible: true, order: 7, width: 160 },
  { key: 'ApprovalTime', label: '审批时间', visible: true, order: 8, width: 240 }
])

// 获取数据
const fetchData = async () => {
  try {
    loading.value = true
    
    const params = {
      OrderNo: searchForm.orderNo || advancedSearchForm.orderNo || undefined,
      TaskName: advancedSearchForm.taskName || undefined,
      TaskCode: advancedSearchForm.taskCode || undefined,
      PageIndex: pagination.currentPage,
      PageSize: pagination.pageSize
    }
    
    // 移除undefined参数
    Object.keys(params).forEach(key => {
      if (params[key as keyof typeof params] === undefined) {
        delete params[key as keyof typeof params]
      }
    })
    
    console.log('发送API请求:', {
      url: '/api/CompletionOrder/GetPageList',
      params: params,
      baseURL: MES_XHY_ApiHost.defaults.baseURL
    })
    
    const response = await MES_XHY_ApiHost.get('/api/CompletionOrder/GetPageList', { params })
    
    console.log('API响应:', response)
    
    if (response.data) {
      const data = response.data as ApiResponse
      console.log('解析后的数据:', data)
      
      tableData.value = data.Data || []
      pagination.total = data.TotalCount || 0
      pagination.currentPage = data.CurrentPage || 1
      pagination.pageSize = data.PageSize || 30
      
      console.log('设置到组件的数据:', {
        tableData: tableData.value,
        pagination: pagination
      })
    }
  } catch (error: any) {
    console.error('获取数据失败:', error)
    console.error('错误详情:', {
      message: error.message,
      response: error.response,
      request: error.request
    })
    
    if (error.response?.status === 404) {
      ElMessage.error('API接口不存在，请检查接口地址')
    } else if (error.response?.status === 500) {
      ElMessage.error('服务器内部错误')
    } else if (error.code === 'ECONNREFUSED') {
      ElMessage.error('无法连接到服务器，请检查服务器是否启动')
    } else if (error.message.includes('timeout')) {
      ElMessage.error('请求超时，请检查网络连接')
    } else {
      ElMessage.error(`获取数据失败: ${error.message}`)
    }
  } finally {
    loading.value = false
  }
}

// 查询
const handleSearch = () => {
  pagination.currentPage = 1
  fetchData()
}

// 高级查询
const handleAdvancedSearch = () => {
  advancedSearchVisible.value = !advancedSearchVisible.value
}

// 关闭高级查询
const handleCloseAdvancedSearch = () => {
  advancedSearchVisible.value = false
  handleAdvancedSearchReset() // 关闭时重置高级查询条件
}

// 高级查询重置
const handleAdvancedSearchReset = () => {
  advancedSearchForm.orderNo = ''
  advancedSearchForm.taskName = ''
  advancedSearchForm.taskCode = ''
}

// 导出
const handleExport = async () => {
  try {
    // 构建导出参数 - 只包含必要的查询参数
    const exportParams: any = {}
    
    // 只添加有值的查询参数
    if (searchForm.orderNo || advancedSearchForm.orderNo) {
      exportParams.OrderNo = searchForm.orderNo || advancedSearchForm.orderNo
    }
    
    if (advancedSearchForm.taskName) {
      exportParams.TaskName = advancedSearchForm.taskName
    }
    
    if (advancedSearchForm.taskCode) {
      exportParams.TaskCode = advancedSearchForm.taskCode
    }
    
    // 添加分页参数
    exportParams.PageIndex = 1
    exportParams.PageSize = 10000 // 导出时使用较大的页面大小
    
    console.log('导出参数:', exportParams)
    
    // 显示确认对话框
    const hasSearchConditions = Object.keys(exportParams).length > 2 // 除了PageIndex和PageSize之外还有查询条件
    
    let confirmMessage = '确定要导出数据吗？'
    if (hasSearchConditions) {
      confirmMessage = '当前有查询条件，将导出符合条件的数据。确定要导出吗？'
    } else {
      confirmMessage = '当前无查询条件，将导出所有数据。确定要导出吗？'
    }
    
    await ElMessageBox.confirm(
      confirmMessage,
      '确认导出',
      {
        confirmButtonText: '确定导出',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 显示加载状态
    const loadingInstance = ElLoading.service({
      lock: true,
      text: '正在导出数据，请稍候...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    // 调用导出API
    const response = await MES_XHY_ApiHost.get('/api/CompletionOrder/ExportCompletionOrders', { 
      params: exportParams,
      responseType: 'blob' // 设置响应类型为blob以处理文件下载
    })
    
    // 关闭加载提示
    loadingInstance.close()
    
    // 处理文件下载
    if (response.data) {
      const blob = new Blob([response.data], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      })
      
      // 创建下载链接
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      
      // 设置文件名
      const now = new Date()
      const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-')
      const fileName = hasSearchConditions ? 
        `完工单数据_${timestamp}.xlsx` : 
        `完工单全部数据_${timestamp}.xlsx`
      
      link.download = fileName
      document.body.appendChild(link)
      link.click()
      
      // 清理
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
      
      ElMessage.success('导出成功！')
    } else {
      ElMessage.error('导出失败：未获取到数据')
    }
    
  } catch (error: any) {
    console.error('导出失败:', error)
    
    if (error.message === 'cancel') {
      // 用户取消，不显示错误信息
      return
    }
    
    if (error.response?.status === 404) {
      ElMessage.error('导出接口不存在，请检查接口地址')
    } else if (error.response?.status === 500) {
      ElMessage.error('服务器内部错误，导出失败')
    } else if (error.code === 'ECONNREFUSED') {
      ElMessage.error('无法连接到服务器，请检查服务器是否启动')
    } else if (error.message.includes('timeout')) {
      ElMessage.error('请求超时，导出失败')
    } else {
      ElMessage.error(`导出失败: ${error.message}`)
    }
  }
}

// 审批完工单
const approveCompletionOrder = async (orderId: number, approvalStatus: boolean, approvalRemark: string = '') => {
  try {
    // 构建审批数据，确保数据类型正确
    const approvalData = {
      CompletedWorkOrdersId: Number(orderId), // 确保是数字类型
      ApprovalStatus: Boolean(approvalStatus), // 确保是布尔类型
      Approver: 'admin', // 可以从用户信息获取
      ApprovalRemark: approvalRemark || ''
    }
    
    console.log('审批参数:', approvalData)
    console.log('审批状态类型:', typeof approvalStatus, '值:', approvalStatus)
    console.log('API地址:', '/api/CompletionOrder/ApproveCompletionOrder')
    
    const response = await MES_XHY_ApiHost.post('/api/CompletionOrder/ApproveCompletionOrder', approvalData)
    
    console.log('审批响应:', response)
    
    if (response.data && response.data.IsSuccess) {
      const statusText = approvalStatus ? '通过' : '不通过'
      ElMessage.success(`审批${statusText}成功`)
      return true
    } else {
      const errorMsg = response.data?.Message || '审批操作失败'
      console.error('API返回错误:', errorMsg)
      ElMessage.error(errorMsg)
      return false
    }
  } catch (error: any) {
    console.error('审批操作失败:', error)
    console.error('错误详情:', {
      message: error.message,
      status: error.response?.status,
      statusText: error.response?.statusText,
      data: error.response?.data,
      config: error.config
    })
    
    // 处理400错误
    if (error.response?.status === 400) {
      const errorData = error.response?.data
      if (errorData && errorData.Message) {
        ElMessage.error(`审批失败: ${errorData.Message}`)
      } else {
        ElMessage.error('审批失败: 请求参数错误，请检查数据格式')
      }
    } else if (error.response?.status === 404) {
      ElMessage.error('审批接口不存在，请检查接口地址')
    } else if (error.response?.status === 500) {
      ElMessage.error('服务器内部错误，审批失败')
    } else if (error.code === 'ECONNREFUSED') {
      ElMessage.error('无法连接到服务器，请检查服务器是否启动')
    } else if (error.message.includes('timeout')) {
      ElMessage.error('请求超时，审批失败')
    } else {
      ElMessage.error(`审批操作失败: ${error.message}`)
    }
    return false
  }
}

// 批量审批通过
const handleBatchApprove = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要审批的完工单')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要审批通过选中的 ${selectedRows.value.length} 个完工单吗？`,
      '确认审批',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 显示加载状态
    const loadingInstance = ElLoading.service({
      lock: true,
      text: '正在批量审批，请稍候...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    let successCount = 0
    let failCount = 0
    
    // 逐个审批
    for (const row of selectedRows.value) {
      const success = await approveCompletionOrder(row.CompletedWorkOrdersId, true, '批量审批通过')
      if (success) {
        successCount++
      } else {
        failCount++
      }
    }
    
    loadingInstance.close()
    
    // 显示结果
    if (successCount > 0) {
      ElMessage.success(`批量审批完成：成功 ${successCount} 个，失败 ${failCount} 个`)
      // 刷新数据
      fetchData()
    } else {
      ElMessage.error('批量审批全部失败')
    }
    
  } catch (error: any) {
    if (error.message !== 'cancel') {
      ElMessage.error('批量审批操作失败')
    }
  }
}

// 批量审批不通过
const handleBatchReject = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要审批的完工单')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要审批不通过选中的 ${selectedRows.value.length} 个完工单吗？`,
      '确认审批',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 显示加载状态
    const loadingInstance = ElLoading.service({
      lock: true,
      text: '正在批量审批，请稍候...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    let successCount = 0
    let failCount = 0
    
    // 逐个审批
    for (const row of selectedRows.value) {
      const success = await approveCompletionOrder(row.CompletedWorkOrdersId, false, '批量审批不通过')
      if (success) {
        successCount++
      } else {
        failCount++
      }
    }
    
    loadingInstance.close()
    
    // 显示结果
    if (successCount > 0) {
      ElMessage.success(`批量审批完成：成功 ${successCount} 个，失败 ${failCount} 个`)
      // 刷新数据
      fetchData()
    } else {
      ElMessage.error('批量审批全部失败')
    }
    
  } catch (error: any) {
    if (error.message !== 'cancel') {
      ElMessage.error('批量审批操作失败')
    }
  }
}

// 单个审批通过
const handleApprove = async (row: CompletionOrderItem) => {
  try {
    await ElMessageBox.confirm(
      `确定要审批通过完工单 ${row.OrderNo} 吗？`,
      '确认审批',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const success = await approveCompletionOrder(row.CompletedWorkOrdersId, true, '审批通过')
    if (success) {
      fetchData() // 刷新数据
    }
  } catch (error: any) {
    if (error.message !== 'cancel') {
      ElMessage.error('审批操作失败')
    }
  }
}

// 单个审批不通过
const handleReject = async (row: CompletionOrderItem) => {
  try {
    await ElMessageBox.confirm(
      `确定要审批不通过完工单 ${row.OrderNo} 吗？`,
      '确认审批',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const success = await approveCompletionOrder(row.CompletedWorkOrdersId, false, '审批不通过')
    if (success) {
      fetchData() // 刷新数据
    }
  } catch (error: any) {
    if (error.message !== 'cancel') {
      ElMessage.error('审批操作失败')
    }
  }
}

// 查看详情
const handleView = (row: CompletionOrderItem) => {
  currentRow.value = row
  viewDialogVisible.value = true
}

// 工单点击
const handleOrderClick = (row: CompletionOrderItem) => {
  handleView(row)
}

// 刷新
const handleRefresh = () => {
  fetchData()
}

// 显示列表设置
const showColumnSettings = () => {
  columnSettingsVisible.value = true
}

// 切换列显示状态
const toggleColumnVisibility = (key: string) => {
  const column = columnSettings.find(col => col.key === key)
  if (column) {
    column.visible = !column.visible
  }
}

// 重置列设置
const resetColumnSettings = () => {
  columnSettings.forEach(col => {
    col.visible = true
  })
}



// 选择变化
const handleSelectionChange = (selection: CompletionOrderItem[]) => {
  selectedRows.value = selection
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  fetchData()
}

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  fetchData()
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  try {
    const date = new Date(dateTime)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch {
    return dateTime
  }
}

// 组件挂载后获取数据
onMounted(() => {
  console.log('Completion_Order组件已挂载')
  
  // 直接尝试获取数据
  fetchData()
})
</script>

<style scoped>
.completion-order-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 40px);
}

.top-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section .page-title {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.search-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.pagination-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

 .dialog-footer {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
 }
 
 .order-link {
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 4px 8px;
   border-radius: 4px;
 }
 
 .order-link:hover {
   background-color: #f0f9ff;
   color: #1890ff;
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
 }
 
 .order-link:active {
   transform: translateY(0);
   box-shadow: 0 1px 4px rgba(24, 144, 255, 0.2);
 }
 
 .advanced-search-section {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #eee;
 }
 
 .search-criteria {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 20px;
 }
 
 .criteria-item {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .criteria-item label {
   font-size: 14px;
   color: #555;
   min-width: 80px;
 }
 
 .criteria-input {
   width: 200px;
 }
 
 .search-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
 }
 
 .column-settings-btn {
   margin-left: 10px;
 }
 
 .column-settings-content {
   padding: 20px 0;
 }
 
 .settings-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 1px solid #ebeef5;
 }
 
 .column-list {
   max-height: 300px;
   overflow-y: auto;
 }
 
 .column-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 0;
   border-bottom: 1px solid #f5f5f5;
 }
 
 .column-item:last-child {
   border-bottom: none;
 }
 
 .column-item.disabled {
   opacity: 0.6;
 }
 
 .column-width {
   color: #909399;
   font-size: 12px;
 }
 

/* 响应式设计 */
@media (max-width: 1200px) {
  .top-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .search-section {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .completion-order-container {
    padding: 10px;
  }
  
  .search-section {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  
  .search-section .el-button {
    width: 100%;
  }
}
</style>